<template>
    <div class="home-container">
        <van-nav-bar title="订单" class="nav-bar" />

        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            

        >
            <van-cell v-for="item in datalist" style="display: flex;" >

            <div style="display: flex;">
                <div class="cell-content">
                    <div>
                    商品名称 {{ item.goods_name }}
                    </div>

                    <div>
                        商品ID {{ item.goods_id }}
                    </div>
                  


                </div>
                <div class="cell-right">
                    <button @click="openshow(item.id)">评价</button>

                    <van-popup
                        v-model:show="show"
                        closeable
                        position="bottom"
                        :style="{ height: '30%' }"
                    > 
                    <div class="rateopen">
                        <input type="text" v-model="rateText" placeholder="请输入评价">
                        <img :src="fileurl" alt="商品图片" width="100" height="100">
                        <input type="file" accept="image/*" @change="handleFileChange">
                        <van-button type="primary" @click="submitRate">提交</van-button>
                    </div>

                    
                    </van-popup>
                     
                </div>

            </div>

            </van-cell>
        </van-list>
        



    </div>




</template>




<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()



const loading = ref(false)
const finished = ref(false)


const user_id = 1

const order_id = route.query.order_id

const rateText = ref('')


const datalist = ref([])

const show = ref(false)
const fileurl = ref(null)
const filedata = ref(null)

const goods_id = ref(null)

const openshow = (id) => {
    show.value = true
    goods_id.value = id
}








const onLoad = () => {
    axios.get(`http://127.0.0.1:8000/rate/rate/?user_id=${user_id}&order_id=${order_id}`)
    .then(res => {
        datalist.value = res.data
        console.log(res)
        loading.value = false
        finished.value = true

    })

    
}


const handleFileChange = (event) => {
    filedata.value = event.target.files[0];
    if (filedata.value) {
        fileurl.value = URL.createObjectURL(filedata.value);

    };
};


const submitRate = () =>{

    const formData = new FormData();
    formData.append('goods_id', goods_id.value);
    formData.append('rate_text', rateText.value);
    formData.append('user_id', user_id);
    if (filedata.value) {
        formData.append('file', filedata.value);
    }

    axios.post(`http://127.0.0.1:8000/rate/goodsrate/`, formData)
    .then(res => {
        console.log(res)
    })



}




</script>




<style scoped>
.home-container {
  width: 400px;
  height: 700px;
  background: white;
  position: relative;
  left: 50%;
  top: 100px;
  border-radius: 20px;
  transform: translate(-50%);
  display: flex; /* 添加 Flexbox 布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  overflow: auto; /* 添加滚动条 */
  scrollbar-width: none; /* Firefox */
}

.nav-bar {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.cell-content {
    text-align: left;
    display: flex;
    width: 40%;
    flex-direction: column; /* 垂直方向排列子元素 */

}


.cell-right {
    display: flex;
    flex-direction: column; /* 垂直方向排列子元素 */
    width: 60%;
    justify-content: center; /* 水平居中 */
    align-items: center;
}

.rateopen{
    display: flex;
    flex-direction: column; /* 垂直方向排列子元素 */
    justify-content: center; /* 水平居中 */
    align-items: center;
}



</style>